<template>
  <div class="stage flex flex-wrap gap-2">
    <div class="stage-item mb-3 w-[45%]" v-for="item in stageList" :key="item.title">     
        <span class="text-4.5 text-gray-600 pb-1"> {{ item.title }}</span>
        <span class="text-3.5 text-gray-400">{{ item.tips }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";

const stageList = ref([
  {
    title: "不分期",
    tips: "0服务费",
    active: false,
  },
  {
    title: "￥1850.59 x 3期",
    tips: "含服务费：￥17.59/期",
    active: false,
  },
  {
    title: "￥934.09 x 6期",
    tips: "含服务费：￥17.59/期",
    active: false,
  },
  {
    title: "￥475.84 x 12期",
    tips: "含服务费：￥17.59/期",
    active: false,
  },
  {
    title: "￥273.63 x 24期",
    tips: "含服务费：￥17.59/期",
    active: false,
  },
]);
</script>
<style scoped lang="scss">
.stage-item {
  @apply flex flex-col justify-center py-3 bg-gray-100 p-2 rounded-lg cursor-pointer border-1 border-double  hover:bg-red-100 hover:border-1 hover:border-red-500 ;
}
</style>
